<template>
  <div
      class="gantt-block-item"
      :draggable="canDrag"
      :style="{
        marginTop: 0.1 * cellHeight + 'px',
        height: '80%',
        left: positionOffset + 'px',
        width: blockWidth + 'px',
        zIndex: zIndex
      }"
  >
    <div>
      <div
          slot="reference"
          :class="['plan',{
          'highlight':isHighlight
        },
        timeStatusClass,
        cutClass,
        movedStatusClass
        ]"
          @dblclick="changeZIndex"
          @pointerdown.left="showDetailInfo"
          @pointerdown.right="showDetailConfig"
          @mouseleave="hideDetailInfo"
          @dragleave="hideDetailInfo"
      >
        <div class="runTime">
          <span>S:{{ startToString }}</span>
          <span>E:{{ endToString }}</span>
        </div>
        <div class="middle">编号{{ blockData.id }}</div>
<!--        <div class="passenger">{{ blockData.passenger }}人</div>-->
      </div>

      <!--      <div class="detail">-->
      <!--        <ul>-->
      <!--          <li>-->
      <!--            <span>发车时间：</span><span>{{ startToString }}</span>-->
      <!--          </li>-->
      <!--          <li>-->
      <!--            <span>到站时间：</span><span>{{ endToString }}</span>-->
      <!--          </li>-->
      <!--          <li>-->
      <!--            <span>载员：</span><span>{{ blockData.passenger }}</span>-->
      <!--          </li>-->
      <!--          <li>-->
      <!--            <span>编号：</span><span>{{ blockData.id }}</span>-->
      <!--          </li>-->
      <!--        </ul>-->
      <!--      </div>-->
    </div>
  </div>

</template>

<script setup lang="ts">
import {computed, ref, onMounted, watch, PropType} from 'vue';
import dayjs from 'dayjs';
import {GTArray} from "@/views/components/gantt/types.ts";
import {useGanttSettingStore} from "@/store/modules/ganttSettingStore/ganttSettingStore.ts";

const ganttSettingStore = useGanttSettingStore();

const props = defineProps({
  blockData: {
    type: Object as PropType<GTArray>,
    default: () => {
      return {}
    }
  },
  currentTime: {
    type: Object as PropType<dayjs.Dayjs>,
    default: () => dayjs(),
  },
  cellHeight: {
    type: Number,
    default: () => {
      return 50
    }
  },
  getPositionOffset: {
    type: Function as PropType<(date: string) => number>,
    required: true
  },
  getWidthAbout2Times: {
    type: Function as PropType<(any) => number>,
    required: true
  },
});

// Define reactive data
const showDetail = ref(false);
const zIndex = ref(2);

// Computed properties
const filterBlockId = computed(() => ganttSettingStore.filterBlockId);
const currentBlock = computed(() => ganttSettingStore.currentBlock);
const currentRow = computed(() => ganttSettingStore.currentRow);
const cutBlock = computed(() => ganttSettingStore.cutBlock);

const canDrag = computed(() => {
  // 是否可拖拽，拖动后的、和进行中，已完成的均不能拖拽
  const {blockData, currentTime} = props;
  const start = dayjs(blockData.start);
  return start.isAfter(currentTime) && blockData.movedStatus !== 'before';
});

const positionOffset = computed(() => {
  const {blockData} = props;
  return props.getPositionOffset(blockData.start);
});

const blockWidth = computed(() => {
  const {blockData} = props;
  return props.getWidthAbout2Times(blockData.start, blockData.end);
});

const isHighlight = computed(() => {
  if (!filterBlockId.value) return false;
  return props.blockData.id.includes(filterBlockId.value);
});

const startToString = computed(() => {
  return dayjs(props.blockData.start).format('HH:mm');
});

const endToString = computed(() => {
  return dayjs(props.blockData.end).format('HH:mm');
});

const currentClass = computed(() => {
  const isCurrentBlock = currentBlock.value ? currentBlock.value.id === props.blockData.id : false;
  const isCurrentRow = currentRow.value ? currentRow.value.id === props.blockData.parentId : true;
  return isCurrentBlock && isCurrentRow ? 'current-select' : '';
});

const cutClass = computed(() => {
  const isCutBlock = cutBlock.value ? cutBlock.value.id === props.blockData.id : false;
  return isCutBlock ? 'cut' : '';
});

const timeStatusClass = computed(() => {
  const {blockData, currentTime} = props;
  const start = dayjs(blockData.start);
  const end = dayjs(blockData.end);
  if (start.isBefore(currentTime) && end.isAfter(currentTime)) {
    return 'NOW_PLAN'; // NOW
  } else if (end.isBefore(currentTime)) {
    return 'PAST_PLAN'; // PAST
  } else {
    return 'FURTHER_PLAN'; // Future
  }
});

const movedStatusClass = computed(() => {
  let statusClassStr = '';
  if (props.blockData.movedStatus === 'before') {
    statusClassStr += 'moved-before ';
  } else if (props.blockData.movedStatus === 'after') {
    statusClassStr += 'moved-after ';
  }
  return statusClassStr.trim();
});

// Methods
const showDetailInfo = () => {
  // 左单击
  showDetail.value = true;
  // Assuming $bus is emitted through some other means or replaced with a Vue 3 composition API alternative
  // emit('updateTimeLines', { start: props.blockData.start, end: props.blockData.end });
};

const showDetailConfig = (e) => {
  e.preventDefault();
  // 右单击
}

const hideDetailInfo = () => {
  showDetail.value = false;
};

const changeZIndex = () => {
  // 左双击
  // emit('upzIndex');
  zIndex.value = 1;
};

const upZIndex = () => {
  zIndex.value = 2;
};

// Lifecycle hooks
onMounted(() => {
  // Replace $bus listeners with appropriate Vue 3 Composition API alternatives
  // e.g., using provide/inject, a global event bus, or Vuex actions/mutations
  // watch(() => someReactiveData, (newVal, oldVal) => { /* do something */ });
});
</script>

<style lang="scss" scoped>
.middle {
  flex: 1;
  text-align: center;
  padding-left: 5px;
}

.runTime {
  display: flex;
  flex-direction: column;
}

.plan {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  border: 1px solid #CCCCCC;
  border-radius: 10px;
  color: #333333;
  padding-left: 5px;
  font-size: 0.8rem;

  &.cut {
    border-color: #FF3F3E;
    opacity: .6;
  }

  &.NOW_PLAN {
    background-color: #D5F8EA;
  }

  &.PAST_PLAN {
    background-color: #F2F2F2;
  }

  &.FURTHER_PLAN {
    background-color: #BFF2FE;
  }

  &.moved-before {
    background-color: #FFFFFF;
    background-image: linear-gradient(135deg, #EEEEEE 25%, rgba(#000, .1) 0, rgba(#000, .1) 50%, #EEEEEE 0, #EEEEEE 75%, rgba(#000, .1) 0);
    background-size: 10px 10px;
  }

  &.moved-after {
    background-image: linear-gradient(135deg, rgba(#3693b3, .5) 25%, transparent 0, transparent 50%, rgba(#3693b3, .5) 0, rgba(#3693b3, .5) 75%, transparent 0);
    background-size: 10px 10px;
  }

  // opacity: 0.8;
}

.highlight {
  color: #FFFFFF;
  animation: colorful 1s linear alternate infinite;
}

.detail {
  //display: none;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently 禁止鼠标拖动时 */
  .header {
    text-align: center;
    font-size: 1rem;
  }
}

.detail ul {
  list-style: none;
  padding: 0;

  li {
    span {
      display: inline-block;
      width: 80px;
      color: #777777;
      font-size: 0.8rem;
    }

    span:first-child {
      text-align: right;
    }

    span:last-child {
    }
  }
}
</style>
